<template>
   <div>
       <Input v-model="filter.name">
           <Button slot="append" icon="ios-search" @click="Search"></Button>
       </Input>
       <br>
       <Button type="info" @click="add">添加数据</Button>
       <Button type="error" @click="deletes">删除多条数据</Button>
       <br><br>
       <!--表格-->
       <Table border :columns="columns" :data="filter.list"
       @on-selection-change="onSelectionChange"></Table>

       <!--分页-->
       <Page :total="filter.total" size="small" show-total show-elevator show-sizer
       @on-change="pageChange"
       @on-page-size-change="pageSizeChange"></Page>

       <!--提示框-->
       <Modal
               v-model="modal"
               title="数据操作"
              >
           <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
               <FormItem label="姓名" prop="name">
                   <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
               </FormItem>
               <FormItem label="密码" prop="password">
                   <Input v-model="formValidate.password"  placeholder="请输入密码"></Input>
               </FormItem>
               <FormItem label="年龄" prop="age">
                    <Input v-model="formValidate.age" placeholder="请输入年龄"></Input>
                </FormItem>
               <FormItem label="选择日期">
                   <Row>
                       <Col span="11">
                       <FormItem prop="date">
                           <DatePicker type="date" placeholder="选择日期" v-model="formValidate.date"></DatePicker>
                       </FormItem>
                       </Col>
                   </Row>
               </FormItem>
               <FormItem label="性别" prop="sex">
                   <RadioGroup v-model="formValidate.sex">
                       <Radio label="male">男</Radio>
                       <Radio label="female">女</Radio>
                   </RadioGroup>
               </FormItem>

               <FormItem label="地址" prop="address">
                   <Input v-model="formValidate.address" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
               </FormItem>
               <FormItem>
                   <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                   <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
               </FormItem>
           </Form>
       </Modal>
   </div>
</template>
<script>
    import Base from './../../common/base';
	import sha256 from 'crypto-js/sha256';
	export default {
		mixins:[Base],
		data () {
			return {
				module:'users',

				filter: {
					list: [],
					total: 0,
					page: 1,
					rows: 10,
					name: ''
                },


				formValidate: {
					name: '',
					password: '',
					age:'',
					sex: '',
					date: '',
					address: ''

				},
				ruleValidate: {
					name: [
						{ required: true, message: '姓名不能为空', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '密码不能为空', trigger: 'blur' }
					],
					age: [
						{ required: true, message: '年龄不能为空', trigger: 'blur' },
					],

					sex: [
						{ required: true, message: '请选择性别', trigger: 'change' }
					],

					date: [
						{ required: true, type: 'date', message: '请选择日期', trigger: 'change' }
					],
					address: [
						{ required: true, message: '请输入地址', trigger: 'blur' },
						{ type: 'string', trigger: 'blur' }
					]
				},
				columns: [
					{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: '姓名',
						key: 'name',
						render: (h, params) => {
							return h('div', [
								h('Icon', {
									props: {
										type: 'person'
									}
								}),
								h('strong', params.row.name)
							]);
						}
					},
					{
						title: '年龄',
						key: 'age'
					},
					{
						title: '地址',
						key: 'address'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.row)

										}
									}
								}, '查看'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.row._id)
										}
									}
								}, '删除')
							]);
						}
					}
				]

			}
		},
		methods: {
			handleSubmit (name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.formValidate.password = sha256(this.formValidate.password).toString();
						if (this.formValidate._id && this.formValidate._id.length > 0) {
							//修改
							this.$http.put(`http://localhost:3000/${this.module}/data/${this.formValidate._id}`, this.formValidate)
								.then(res => {
									this.$Message.success('提交成功!');
									this.$refs[name].resetFields();
									this.modal = false;
									this.getData();
									Object.assign(this.$data.formValidate, this.$options.data().formValidate)
								})
						} else {
							//添加
							this.$http.post(`http://localhost:3000/${this.module}/data`, this.formValidate)
								.then(res => {
									this.$Message.success('提交成功!');
									this.$refs[name].resetFields();
									this.modal = false;
									this.getData();
									Object.assign(this.$data.formValidate, this.$options.data().formValidate)
								})
						}

					} else {
						this.$Message.error('表单验证失败!');
					}
				})
			},

			remove (id) {
				this.$Modal.confirm({
					title: '确认删除数据',
					content: '<p>确认删除该数据吗</p>',
					onOk: () => {
						this.$Message.info('删除成功');
						this.$http.delete(`http://localhost:3000/${this.module}/data/${id}`)
							.then((res) => {
								console.log(res);
								this.getData();
							})
					},
					onCancel: () => {
					}
				});
			},

			getData(){
				this.$http.post(`http://localhost:3000/${this.module}/list`, this.filter)
					.then(res => {
//						console.log(res.data);
						this.filter.list = res.data.rows;
						this.filter.total = res.data.total;
						this.filter.page = res.data.page;
					})
			}
        }

	}
</script>